<template>
  <home-header>
    <template #nav>
      <global-nav curr="home" />
    </template>
  </home-header>
  <div class="my-10 box-area">
    <div class="wrapper">
      <div class="relative cursor-pointer box box1" @click="goto('/joinus/')">
        <div class="duration-300 hover:scale-105">
          <img src="../assets/box1.jpg" alt="" />
        </div>
        <div class="absolute py-5 text-center title">
          <h3>加入我们</h3>
          <p>世界那么大，你不来怎么知你牛逼</p>
        </div>
      </div>
      <div class="flex items-center justify-between mt-10">
        <div class="relative cursor-pointer box box3" @click="goto('/qmxb/')">
          <div class="duration-300 hover:scale-105">
            <img src="../assets/box3.jpg" alt="" />
          </div>
          <div class="absolute py-5 pl-5 title">
            <h3>全民学霸</h3>
            <p>拯救各种濒临破除的学校，给你前所未有的...</p>
          </div>
        </div>
        <div class="relative cursor-pointer box box2" @click="goto('/mrz/')">
          <div class="duration-300 hover:scale-105">
            <img src="../assets/box2.jpg" alt="" />
          </div>
          <div class="absolute py-5 pl-5 title">
            <h3>美人传</h3>
            <p>一款集宫斗、换装、养成等多重玩法于一体...</p>
          </div>
        </div>
      </div>
      <div
        class="relative mt-10 cursor-pointer box box4"
        @click="goto('/about/')"
      >
        <div class="duration-300 hover:scale-105">
          <img src="../assets/box4.jpg" alt="" />
        </div>
        <div class="absolute py-5 text-center title">
          <h3>企业文化</h3>
          <p>游成互动 乐在其中</p>
        </div>
      </div>
      <div class="relative mt-10">
        <div class="py-5 mt-10 text-left">
          <h3 class="text-4xl font-bold text-center">关于我们</h3>
          <p class="mt-6 text-2xl leading-loose">
            厦门游成互动网络科技有限公司(以下简称“游成”)坐落于美丽的鹭岛厦门，是一家以游戏发行为基础的互联网公司。游成本着“创造快乐，传递精彩”的游戏初衷，坚持“专注、创新、超越、多元化”的理念，紧随“互联网+”文化产业的发展趋势，秉承“本份，敏捷”的价值理念，将“更迅速、更精确、更细致”的发行宗旨，为玩家提供更轻松愉悦、丰富精彩的游戏体验!一群快乐的人一起做快乐的事，诚邀同样热爱游戏的你<a
              href="/joinus/"
              class="text-blue-500 hover:text-blue-700"
              >加入我们</a
            >或投递简历至邮箱:
            <a
              href="mailto:HR@youcwl.com"
              class="text-blue-500 hover:text-blue-700"
              >HR@youcwl.com</a
            >
          </p>
        </div>
      </div>
    </div>
  </div>
  <home-footer></home-footer>
</template>

<script setup>
import HomeHeader from './HomeHeader.vue'
import HomeFooter from '@/components/HomeFooter.vue'
import GlobalNav from '@/components/GlobalNav.vue'

function goto(url) {
  window.location.href = url
}
</script>

<style lang="scss" scoped>
.box {
  border-radius: 20px;
  overflow: hidden;
  .title {
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(25, 25, 25, 0.7);
    color: #fff;
    h3 {
      font-size: 34px;
    }
    h3 + p {
      font-size: 24px;
    }
  }
}
</style>
